<template>
  <div>
    <el-form :model="filterData" label-width="80px" size="mini">
      <el-row :gutter="20">
        <el-col style="width: 240px;">
          <el-form-item label="姓名">
            <el-input v-model="filterData.name" placeholder="姓名" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 300px;">
          <el-form-item label="性别">
            <el-input v-model="filterData.gender" placeholder="性别" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col style="width: 300px;">
          <el-form-item label="手机号码">
            <el-input v-model="filterData.mobile" placeholder="手机号码" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 300px;">
          <el-form-item label="身份证号">
            <el-input v-model="filterData.idard" placeholder="身份证号" clearable></el-input>
          </el-form-item>
        </el-col>

        <el-col style="width: 180px;">
          <el-form-item label-width="0">
            <el-button type="primary" icon="el-icon-search" @click="handleQuery">搜索</el-button>
          </el-form-item>
        </el-col>
      </el-row>
      <div style="border-bottom: 1px solid #eaeaea;"></div>
    </el-form>

    <div style="margin:5px 0px">
      <el-button-group>
        <el-button type="primary" size="mini" icon="el-icon-circle-plus-outline" @click="handleCreate">新增教师</el-button>
      </el-button-group>
    </div>
    <div class="table-wraper">
      <el-table :data="tableData" border style="height: 100%;">
        <el-table-column label="序号" type="index" align="center" width="60px"></el-table-column>
        <el-table-column label="姓名" prop="name" align="center" width="100px" >
          <template v-slot="scope">
            {{scope.row.name}}
            <i class="el-icon-male" v-if="scope.row.gender=='男'" style="font-weight: bold;color:#409EFF"></i>
            <i class="el-icon-female" v-if="scope.row.gender=='女'" style="font-weight: bold;color:#F56C6C"></i>
          </template>
        </el-table-column>
        <el-table-column label="手机号" prop="mobile" width="120px"></el-table-column>
        <el-table-column label="家庭住址" prop="address" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="备注" prop="memo" align="center" show-overflow-tooltip></el-table-column>
        <el-table-column label="操作"  align="center" width="140px">
          <template v-slot="scope">
            <el-button-group>
              <el-button icon="el-icon-edit" circle title="编辑" size="mini" @click="handleEdit(scope.$index,scope.row)"></el-button>
              <el-button icon="el-icon-delete" type="danger" circle title="删除" size="mini" @click="handleDelete(scope.$index,scope.row)"></el-button>
            </el-button-group>
          </template>
        </el-table-column>
      </el-table>
      <div style="display: flex;">
        <div style="flex: 1;">huizong</div>
        <div>
          <el-pagination class="pagination" prev-text="上一页" next-text="下一页" background
        layout=" prev, pager, next,sizes,total" :page-sizes="[20, 40, 60]" :total="numrows" :page-size="pagesize"
        :current-page="curpage" @size-change="handleSizeChange" @current-change="handleCurrentChange"></el-pagination></div>
      </div>
    </div>

    <!--弹窗相关-->
    <CreateUI v-if="createVisible" ref="createUI" @complete="handleCreateCallback"></CreateUI>
    <EditUI v-if="editVisible" ref="editUI" @complete="handleEditCallback"></EditUI>
  </div>
</template>

<script>
  import CreateUI from './create.vue';
  import EditUI from './edit.vue';
  export default{
    components:{
      CreateUI,
      EditUI
    },
    data(){
      return{
        pagesize:20,
        curpage:1,
        numrows:1,
        createVisible:false,
        editVisible:false,
        filterData:{
          name:'',
          mobile:'',
          idcard:''
        },
        tableData:[

        ]
      }
    },
    created(){
       this.loadDataList();
    },
    methods:{
      handleSizeChange: function(val) {
        this.pagesize = val;
        this.curpage = 1;
        this.loadDataList();
      },
      handleCurrentChange: function(val) {
        this.curpage = parseInt(val);
        this.loadDataList();
      },
      handleQuery(){
        this.curpage=1;
        this.loadDataList();
      },
      loadDataList(){
          const params={
            curpage:this.curpage,
            pagesize:this.pagesize,
            name:this.filterData.name,
            mobile:this.filterData.mobile,
            idcard:this.filterData.idcard,
          }
          this.api_helper.post("api/admin/educational/teacher/list_by_page",params).then(res=>{
              if(res.status==200 && res.data.code==1){
                  this.tableData=res.data.list;
                  this.numrows=res.data.numrows;
              }
          })
      },
      handleCreate(){
          this.createVisible=true;
          this.$nextTick(()=>{
            this.$refs.createUI.dialogVisible=true;
            this.$refs.createUI.init();
          })
      },
      handleCreateCallback(){
         this.loadDataList();
      },
      handleEdit(index,data){
        this.editVisible=true;
        this.$nextTick(()=>{
          this.$refs.editUI.dialogVisible=true;
          this.$refs.editUI.init(index,JSON.parse(JSON.stringify(data)));
        })
      },
      handleEditCallback(index,data){
        console.log(index,data);
         this.tableData[index].title=data.title;
         this.tableData[index].mobile=data.mobile;
         this.tableData[index].address=data.address;
         this.tableData[index].manager=data.manager;
      },
      handleDelete(index,row){
        let confirmText = ["姓名: " + row.name, "性别:" + row.gender,"电话号码:" + row.mobile];
        const newDatas = [];
        const h = this.$createElement;
        for (const i in confirmText) {
        	newDatas.push(h('p', null, confirmText[i]));
        }
        this.$confirm('标题',"确定要删除以下教师吗？",{
        	message: h('div', null, newDatas),
        	confirmButtonText: "删除",
        	cancelButtonText: "取消",
        	type: 'error'
        }).then(() => {
             this.api_helper.post("api/admin/teacher/delete",{tid:row.tid}).then(res=>{
                  if(res.status==200 && res.data.code==1){
                   this.$message.success({
                     message: res.data.msg,
                     duration: 1500,
                     showClose: true
                   });
                   this.loadDataList();
                  }else{
                    this.$message.error({
                      message: res.data.msg,
                      duration: 1500,
                      showClose: true
                    });
                  }
             })
          });
      }

    }
  }
</script>

<style scoped>
  .table-wraper{
    height:calc(100vh - 200px);
  }
</style>
